<template>
<div class="app">
    <!-- 登录 -->
    <div class="denglu" v-if="show" v-loading.fullscreen.lock="fullscreenLoading">
        <div class="top">
            <div>
                <img src="../assets/img/1.png" alt="" />
                <p class="p-w">Welcome</p>
                <p class="p-y">用户登录</p>
            </div>
            <div></div>
        </div>
        <div class="bottom">
            <div class="sj-hm">
                <p>手机号码</p>
                <input type="text" placeholder="请输入" v-model="text" />
                <p class="yz">
                    <span class="sj-ko" style="display: none">号码不能为空</span>
                    <span class="sj-cw" style="display: none">号码格式错误,请输入11位手机号码</span>
                    <span v-text="this.baocuo" class="baocuo"></span>
                </p>
            </div>
            <div class="dl-mm">
                <p>登录密码</p>
                <input type="password" placeholder="请输入" v-model="pas" />
                <p class="yz">
                    <span class="mm-ko" style="display: none">密码不能为空</span>
                    <span class="mm-cw" style="display: none">密码错误,请输入6到12位，数字+字母</span>
                </p>
            </div>

            <button @click="sssdsr">点击登录</button>
            <p class="xie-yi">
                登录前必须阅读且同意《
                <router-link to="/xieyi">用户服务协议</router-link>》
            </p>
        </div>
    </div>
    <div class="mt" v-if="mtk">
        <div class="mt-cen">
            <div class="mt-top">用户服务协议</div>
            <div class="mt-text">
                尊敬的用户，欢迎您使用“电信网上营业厅”网站（网址：www.tx55128.cn，简称“本网站”）。
                本网站由中国电信股份有限公司电子渠道运营中心（简称“中国电信”或“我们”）所有和运营。在登录、使用本网站之前，您应当仔细阅读、充分理解《用户服务协议》（简称“本协议”）的全部内容，特别是本协议中以加粗字体显示的内容，您应当重点阅读。如果您不同意本协议或其中任何条款，请您立即停止登录或使用本网站；您开始登录或使用本网站，即表明您已同意本协议内容，本协议即构成对用户和中国电信（合称“双方”）有约束力的法律文件。
                第一条 定义
                1.1 本网站：是指由中国电信股份有限公司电子渠道运营中心所有并负责运营的“电信网上营业厅”网站（网址：www.tx55128.cn）。
            </div>
            <div class="fot">
                <p @click="No()">不同意</p>
                <p @click="YESS()">确定</p>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import api from "../fetch/api";
import axios from "axios";
import Qs from "qs";
import local from "@/utils/local";
// import req from "@/utils/request";
import {
    encrypt,
    decrypt
} from "@/fetch/crypto.js";
export default {
    data() {
        return {
            mtk: false,
            token: "",
            text: "",
            pas: "",
            fag: false, //账号标杆
            mmg: false, //密码标杆
            zzbds: /^[0-9a-zA-Z]{6,12}$/,
            sjyz: /^[1]([3-9])[0-9]{9}$/,
            baocuo: "",
            keyy: "lizxlylwkdqzymyzsqblt666",
            IVv: "txwl888txwl20201",
            str: '',
            show: true,
            fullscreenLoading: false,
        };
    },
    mounted() {

    },
    created() {

        var array = window.location.href.split("token=");
        console.log(array, '1111111');
        if (array.length > 1 && array[1] != null && array[1] != undefined && array[1].length > 0) {
            this.load();
            //静默登录
            this.show = false;

            var ck = localStorage.getItem('t-k');
            console.log(ck, 'ck');
            if (ck == null) { //未加载过，
                // alert("首次打开页面");
                this.load();
                this.show = false;
                clearTimeout(this.timer); //清除延迟执行
                this.timer = setTimeout(() => { //设置延迟执行
                    this.mtk = true;
                }, 1000);
                localStorage.setItem('t-k', 12);
            } else {
                // alert("页面刷新");
                this.mtk = false;
                this.YESS();
            }

        } else {
            //显示登录窗口，用户输入账号密码登录
            this.show = true
            this.mtk = false
            this.$message({
                showClose: true,
                message: 'token为空',
                type: 'success',
                center: true
            });

            this.$router.push({
                path: '/'
            });
        }

    },

    methods: {
        // 点击不同意
        No() {
            this.mtk = false;
            this.$router.back();
            this.$message({
                message: '请您同意协议',
                
            });
            this.show = true;
        },
        YESS() {

            var array = window.location.href.split("token=");
            console.log(array, '1111111');

            if (array.length > 1 && array[1] != null && array[1] != undefined && array[1].length > 0) {
                this.load();

                //静默登录
                this.show = false;
                axios
                    .get("http://120.77.174.236:8002/api/Other/GetDate")
                    .then((res) => {
                        let {
                            data
                        } = res;
                        let {
                            Data
                        } = data;
                        local.set("t-k", Data);
                        this.str = `xstxwl.${Data}...txwl999`
                        //1.调用GetUser接口，验证token是否有效
                        this.load();
                        axios
                            .get("http://120.77.174.236:8002/api/Users/GetUser", {
                                headers: {
                                    mtoken: array[1],
                                },
                            })
                            .then((res) => {
                                let {
                                    data
                                } = res;
                                let {
                                    Data
                                } = data;
                                // let { Data } = data;
                                if (data.Code == 200) {
                                    this.load();
                                    //判断用户权限
                                    let _this = this
                                    // 代理
                                    if (data.Data.Is_Agent == 1 && data.Data.SfZj != 1) {
                                        //登录成功，跳转到推广 。。。。
                                        this.$message({
                                            showClose: true,
                                            message: '代理登录成功',
                                            type: 'success',
                                            center: true
                                        });
                                        let token = encrypt(this.str, this.keyy, this.IVv);
                                        localStorage.setItem('token', token);
                                        sessionStorage.setItem('token', token);
                                        // debugger;
                                        local.set("Code", data.Data);
                                        _this.$router.push('/extension');

                                    } else if (data.Data.Is_Agent != 1 && data.Data.SfZj == 1) {
                                        //登录成功，跳转到推广 。。。。
                                        this.$message({
                                            showClose: true,
                                            message: '专家登录成功',
                                            type: 'success',
                                            center: true
                                        });
                                        let token = encrypt(this.str, this.keyy, this.IVv);
                                        localStorage.setItem('token', token);
                                        sessionStorage.setItem('token', token);
                                        // debugger;
                                        local.set("Code", data.Data);
                                        _this.$router.push('/index');

                                    } else if (data.Data.Is_Agent == 1 && data.Data.SfZj == 1) {
                                        //登录成功，跳转到首页 。。。。
                                        this.$message({
                                            showClose: true,
                                            message: '专家代理登录成功',
                                            type: 'success',
                                            center: true
                                        });
                                        let token = encrypt(this.str, this.keyy, this.IVv);
                                        localStorage.setItem('token', token);
                                        sessionStorage.setItem('token', token);
                                        // debugger;
                                        local.set("Code", data.Data);
                                        _this.$router.push('/index');
                                    } else {
                                        this.$message({
                                            showClose: true,
                                            message: '权限不足',
                                            type: 'success',
                                            center: true
                                        });
                                        this.$router.replace({
                                            path: '/'
                                        });
                                    }

                                } else if (data.Code == 604) {
                                    this.$message({
                                        message: data.Message,
                                        type: 'success',
                                    });
                                    this.load();
                                    this.$router.replace({
                                        path: '/'
                                    });
                                    this.mtk = false

                                }
                            })
                            .catch((err) => {
                                console.log(err);
                            });
                    })
                    .catch((err) => {
                        console.log(err);
                    });

            } else {
                //显示登录窗口，用户输入账号密码登录
                this.show = true
                this.mtk = false
                this.$router.replace({
                    path: '/'
                });
                // this.sssdsr();

            }
        },

        // 加载。。。
        load() {
            const loading = this.$loading({
                lock: true,
                text: '拼命加载中...',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, 0.6)'
            });
            setTimeout(() => {
                loading.close();
            }, 2500);
        },
        // 点击登录
        sssdsr() {
            if (this.text == "") {
                this.$notify({
                    message: '请填写手机号',
                    type: 'warning',
                    position: 'top-left',
                    duration: 1500
                });
                this.fag = false;
            } else if (!this.sjyz.test(this.text)) {
                this.$notify({
                    message: '手机号不正确',
                    type: 'warning',
                    position: 'top-left',
                    duration: 1500
                });
                this.fag = true;
            } else if (this.pas == "") {
                this.$notify({
                    message: '请填写密码',
                    type: 'warning',
                    position: 'top-left',
                    duration: 1500
                });
                this.mmg = false;
            } else if (!this.zzbds.test(this.pas)) {
                this.$notify({
                    message: '密码不正确',
                    type: 'warning',
                    position: 'top-left',
                    duration: 1500
                });
                this.mmg = true;
                console.log(this.mmg, '22222222')
            } else {
                this.load();
                this.show = false
                axios
                    .get("http://120.77.174.236:8002/api/Other/GetDate")
                    .then((res) => {
                        let {
                            data
                        } = res;
                        let {
                            Data
                        } = data;
						console.log(res.data,'qqqqqqqqqqqqqqqq')
                        // strr=`xstxwl.${Data}...txwl999`
                        // console.log(Data);
                        local.set("t-k", Data);
                        this.str = `xstxwl.${Data}...txwl999`
						console.log(this.str,'121212')
                        this.load();
                        axios
                            .post(
                                "http://120.77.174.236:8002/api/Users/Login", {
                                    LoginType: 1,
                                    LoginName: this.text,
                                    Password: this.pas
                                }, {
                                    headers: {
                                        mtoken: encrypt(this.str, this.keyy, this.IVv),

                                    },
                                }
                            )
                            .then((res) => {
                                console.log(res,'122222222222222222');

                                let {                                
                                    data
                                } = res;
                                let {
                                    Data
                                } = data;
                                if (data.Code == 602 || data.Code == 601 || data.Code == 603) {
                                    this.baocuo = Data;
                                    this.text = "";
                                    this.pas = "";
                                } else if (data.Code == 200) {
                                    this.load();
                                    let token = encrypt(this.str, this.keyy, this.IVv);
                                    console.log(token);
                                    localStorage.setItem('token', token);
                                    sessionStorage.setItem('token', token);
                                    // debugger;
                                    local.set("Code", Data);

                                    this.text = "";
                                    this.pas = "";
                                    let _this = this
                                    // 代理
                                    if (data.Data.Is_Agent == 1 && data.Data.SfZj !== 1) {
                                        //登录成功，跳转到推广 。。。。
                                        this.$message({
                                            showClose: true,
                                            message: '代理登录成功',
                                            type: 'success',
                                            center: true
                                        });
                                        _this.$router.push('/extension');

                                    } else if (data.Data.Is_Agent !== 1 && data.Data.SfZj == 1) {
                                        //登录成功，跳转到推广 。。。。
                                        this.$message({
                                            showClose: true,
                                            message: '专家登录成功',
                                            type: 'success',
                                            center: true
                                        });
                                        _this.$router.push('/index');

                                    } else if (data.Data.Is_Agent == 1 && data.Data.SfZj == 1) {
                                        //登录成功，跳转到首页 。。。。
                                        this.$message({
                                            showClose: true,
                                            message: '专家代理登录成功',
                                            type: 'success',
                                            center: true
                                        });

                                        _this.$router.push('/index');
                                    } else {
                                        this.$message({
                                            showClose: true,
                                            message: '权限不足',
                                            type: 'success',
                                            center: true
                                        });
                                        this.$router.replace({
                                            path: '/'
                                        });
                                    }

                                }
                            })
                            .catch((err) => {
                                console.log(err);
                            });
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }

            // return;

        },

    },

};
</script>

<style>
.el-icon-loading {
    font-size: 26px;
}

.el-loading-text {
    font-size: 1rem;
}
</style><style lang="less" scoped>
.mt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100;
    // display: none;

}

.mt-cen {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 21.4375rem;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    background: #fff;
    box-shadow: 2px 3px 20px rgba(0, 0, 0, 0.2);
    z-index: 120;
    border-radius: 16px;
    // display: none;
}

.mt-top {
    padding: 1.125rem 0;
    text-align: center;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    // line-height: 31px;
    color: #333333;
}

.mt-text {
    padding: 0 1.125rem 0.1875rem;
    // height:21.625rem;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 24px;
    color: #333333;
    display: block;
    // white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fot {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 48px;
    color: #8C8C8C;
    // padding: 1rem 0;
}

.fot>p {
    width: 50%;
    text-align: center;
}

.fot>p:nth-child(1) {
    border-right: 0.0625rem solid #EEEEEF;
}

.fot>p:nth-child(2) {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    // line-height: 27px;
    color: #374EF2;
}

.baocuo {
    display: block;
}

.yz {
    color: red !important;
    font-size: 0.5rem !important;
    height: 24px;
    margin-bottom: 0px !important;
}

.xie-yi {
    font-size: 0.9rem;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 139px;
}

.xie-yi>a {
    font-size: 0.9rem;
    font-weight: bold;
    color: #ffffff;
}

.bottom>button {
    width: 85%;
    height: 45px;
    background: #fff;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    outline: none;
    font-size: 1rem;
    font-weight: bold;
    color: #3d4dff;
    margin-bottom: 20px;
}

.dl-mm {
    width: 85%;
    // margin-bottom: 30px;
}

.sj-hm {
    margin-top: 77px;
    width: 85%;
    // margin-bottom: 24px;
}

.sj-hm>p,
.dl-mm>p {
    font-size: 1rem;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 12px;
}

.sj-hm>input,
.dl-mm>input {
    width: 100%;
    height: 45px;
    background: #ffffff;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    outline: none;
    text-indent: 0.5rem;
}

.bottom {
    width: 100%;
    height: auto;
    background-color: #374ef2;
    border-radius: 28px 28px 0px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p-y {
    font-size: 1rem;
    font-weight: 400;
    line-height: 31px;
    color: #93979a;
}

.p-w {
    font-size: 1.8rem;
    font-family: Arial;
    font-weight: bold;
    color: #051b42;
    margin-bottom: 12px;
}

.denglu {
    width: 100%;
    height: 100%;
    padding-top: 82px;
    box-sizing: border-box;
    background-color: #f6f6fe;
}

.top {
    width: 85%;
    height: 235px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}

.top>div:nth-child(2) {
    width: 49%;
    height: 241px;
    margin-top: 6px;
    background-image: url(../assets/img/2.png);
}

.top>div:first-child>img {
    margin-bottom: 21px;
}
</style>
